<template>
  <div class="menu">
    <!-- 左侧一级分类列表 -->
    <div class="left">
      <ul>
        <li
          v-for="(item, index) in menus"
          :key="item.id"
          :class="{ active: currentIndex === index }"
          @click="selectCategory(index)">
          <p class="text">{{ item.name }}</p>
        </li>
      </ul>
    </div>

    <!-- 右侧当前分类的商品 -->
    <div class="right" v-if="menus.length">
      <ul>
        <li class="cate">
          <h4 class="title">{{ menus[currentIndex].name }}</h4>
          <ul class="item">
            <li
              v-for="(child, index) in menus[currentIndex].children"
              :key="child.id">
              <img :src="child.picture" :alt="child.name" />
              <span>{{ child.name }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const categoryList = ref([
  { id: 1, name: "名片类", picture: "/", pid: 0 },
  { id: 2, name: "数码快印名片（盒）", picture: "/images/category/clothes/jackets.png", pid: 1 },
  { id: 3, name: "拼版印刷名片（盒）", picture: "/images/category/clothes/overcoat.jpg", pid: 1 },
  { id: 4, name: "无线胶装书", picture: "/images/category/clothes/dress.png", pid: 1 },
  { id: 5, name: "单张类", picture: "/", pid: 0 },
  { id: 6, name: "激光碳粉单张", picture: "/images/category/foods/biscuit.jpg", pid: 5 },
  { id: 7, name: "惠普油墨单张", picture: "/images/category/foods/tomato.jpg", pid: 5 },
  { id: 8, name: "黑白单张", picture: "/images/category/foods/drinks.jpg", pid: 5 },
  { id: 9, name: "过塑单张", picture: "/images/category/foods/tea.jpg", pid: 5 },
  { id: 10, name: "对裱单张", picture: "/images/category/foods/oil.jpg", pid: 5 },
  { id: 11, name: "书册类", picture: "/", pid: 0 },
  { id: 12, name: "骑马订书", picture: "/images/category/jewelry/ornaments.jpg", pid: 11 },
  { id: 13, name: "黑白骑马订", picture: "/images/category/jewelry/watch.jpg", pid: 11 },
  { id: 14, name: "无线胶装书", picture: "/images/category/jewelry/diy.jpg", pid: 11 },
  { id: 15, name: "标签类", picture: "/", pid: 0 },
  { id: 16, name: "不干胶", picture: "/images/category/store/towel.png", pid: 15 },
  { id: 17, name: "水晶标", picture: "/images/category/store/paper.png", pid: 15 },
  { id: 18, name: "pvc", picture: "/images/category/store/bowl.png", pid: 15 },
  { id: 19, name: "茶杯茶具", picture: "/images/category/store/cup.png", pid: 15 },
  { id: 20, name: "收纳整理", picture: "/images/category/store/box.png", pid: 15 },
  { id: 21, name: "印刷类", picture: "/", pid: 0 },
  { id: 22, name: "拼版印刷单张", picture: "/images/category/phone/phone.png", pid: 21 },
  { id: 23, name: "拼版不干净", picture: "/images/category/phone/computer.png", pid: 21 },
  { id: 24, name: "联单印刷", picture: "/images/category/phone/headset.png", pid: 21 },
  { id: 25, name: "平板", picture: "/images/category/phone/flat.png", pid: 21 },
  { id: 26, name: "相机", picture: "/images/category/phone/camera.png", pid: 21 },
  { id: 27, name: "户外运动", picture: "/", pid: 0 },
  { id: 28, name: "运动鞋", picture: "/images/category/motion/shoes.jpg", pid: 27 },
  { id: 29, name: "球类运动", picture: "/images/category/motion/ball.png", pid: 27 },
  { id: 30, name: "垂钓用品", picture: "/images/category/motion/fishingrod.png", pid: 27 },
  { id: 31, name: "运动服", picture: "/images/category/motion/clothes.png", pid: 27 },
  { id: 32, name: "骑行装备", picture: "/images/category/motion/bicycle.png", pid: 27 },
  { id: 33, name: "电动车", picture: "/images/category/motion/vehicle.png", pid: 27 }
])

// 转换为树形结构（一级分类 + 子分类）
function convertToTree(data) {
  const map = {}
  const tree = []
  for (const item of data) {
    map[item.id] = { ...item, children: [] }
  }
  for (const item of data) {
    if (item.pid === 0) {
      tree.push(map[item.id])
    } else {
      map[item.pid]?.children.push(map[item.id])
    }
  }
  return tree
}

const menus = ref(convertToTree(categoryList.value))
const currentIndex = ref(0)

function selectCategory(index) {
  currentIndex.value = index
}
</script>

<style lang="scss" scoped>
.menu {
  display: flex;
  height: 100vh;
  .left {
    width: 100px;
    background-color: #f3f3f3;
    overflow-y: auto;
    li {
      padding: 10px;
      text-align: center;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      &.active {
        background-color: #fff;
        font-weight: bold;
        color: #007bff;
      }
    }
  }
  .right {
    flex: 1;
    background-color: #fff;
    overflow-y: auto;
    .cate {
      padding: 15px;
      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .item {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        li {
          width: 30%;
          text-align: center;
          img {
            width: 70px;
            height: 70px;
            object-fit: cover;
          }
          span {
            display: block;
            margin-top: 5px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
